<template>
	<view class="goods-box" v-show="datas" :style="[config.goodsBoxStyle]">
		<swiper
			class="goods-box__swiper"
			v-if="datas && datas.length > 0"
			:display-multiple-items="config.multiple || 3"
			:autoplay="config.autoplay"
			:interval="config.interval || 5000"
			:duration="config.duration || 500"
			:circular="config.circular || false"
			:next-margin="config.rightMargin ? config.rightMargin : '10rpx'"
			:current="config.current || 0"
			@change="swiperChange"
			:disable-touch="disable"
			:style="[config.swiperStyle]"
		>
			<swiper-item v-for="(list, index) in datas" :key="index" :style="[config.swiperItemStyle]">
				<slot :goodItem="list" :goodIndex="index" name="goodsSlot"></slot>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'goodsSwiper',
	props: {
		datas: {},
		config: {}
	},
	data() {
		return {
			current: 0,
			disable: this.datas.length <= (this.config.multiple || 3)
		};
	},
	methods: {
		swiperChange(e) {
			this.current = e.detail.current;

			this.$emit('change', e.detail.current);
		},
		tapFun(e) {
			var type = e.currentTarget.dataset.type,
				id = parseInt(e.currentTarget.dataset.id) || 0,
				index = parseInt(e.currentTarget.dataset.index) || 0;

			this.$emit('tapFun', { type: type, id: id, index: index });
		}
	}
};
</script>

<style lang="less">
.goods-box {
	position: relative;
	box-sizing: border-box;

	&__swiper {
		height: 470rpx;

		&__item {
			width: 100%;
			padding-left: 10rpx;
			font-weight: bold;
		}
	}
}
</style>
